<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios入门</title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<h1>Axios Ajax调用</h1>
	</body>
	<script>
		// 发起GET请求
		// 参数1：URL地址 参数2：提交参数 参数3：回调函数
		// 回调地狱问题：由于业务复杂，导致多重的Ajax进行嵌套，如果中间出现任何问题，则导致整个ajax调用失败
		
		// 参数1：URL地址 参数2：提交参数
		// 跨域请求
		let url = "http://localhost:8080/hello"
		axios.get(url)
			.then(function(result){
				// 获取返回值 promise对象
				// 如果需要获取服务器的返回值则使用.data属性
				console.log(result.data)
			})
			
		// 带参数的get请求
		// url:http://localhost:8080/axios?id=100
		axios.get('http://localhost:8080/axios?id=100')
			.then(result=>{
				console.log(result.data)
			})
		
		// restFul风格
		axios.get('http://localhost:8080/axios/100')
			.then(result=>{
				console.log(result.data)
			})
			
		// 利用params对象提交数据
		axios.get('http://localhost:8080/axiosParams',{
			params:{
				id:100
			}
		})
		.then(result=>{
			console.log(result.data)
		})
		
		// 注意事项：GET/DELETE语法相同
		
		/**
		 * post/put请求的说明：
		 * 如果采用对象的方式进行数据传输，则发起请求时自动的转化为JSON格式进行数据传递
		 */
		axios.post('http://localhost:8080/addAxios',{
				id:100,
				name:'tomcat'
			}).then(result=>{
				console.log(result.data)
			})
		
		// 定义表单对象
		let params=new URLSearchParams()
		params.append('id',100)
		params.append('name','tomcat')
		axios.post('http://localhost:8080/addAxiosForm',params)
			.then(result=>{
				console.log(result.data)
			})
			
		//1.配置Ajax的基础路径
		axios.defaults.baseURL="http://localhost:8080/"
		// 2.添加请求头信息
		let token=''
		axios.defaults.headers.common['token']=token
		axios.get('getParams',{
			params:{
				id:100
			}
		})
		.then(result=>{
			console.log(result.data)
		})
		
		async function getResult(){
			// const result = await axios.get('getParams')
			// console.log(result.data)
			const{data: value} = await axios.get('getParams')
			console.log(value)
		}
		
	</script>
</html>
